import { Button, Form, Input, message, Modal, Space } from "antd"
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { useRequest } from "ahooks";
import { html_markdown } from "../../../api/request";
import CustomSelect from "../../../components/CustomSelect";

interface ImportKnowledgeProps {
    open: boolean;
    onChange: (open: boolean) => void;
    onClose: () => void;
}

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
};

/**
 * markdown渲染组件
 */
export default (props: ImportKnowledgeProps) => {
    const { open, onChange, onClose } = props

    const [form] = Form.useForm();

    const { loading: confirmLoading, run: markdownRun } = useRequest(html_markdown, {
        manual: true,
        onSuccess: (result) => {
            if (result.code == 200) {
                message.success("导入成功")
                onChange(false)
            } else {
                message.error("服务器出错")
            }
        },
    })

    return <Modal open={open}
        title="导入"
        onOk={() => {
            form.validateFields().then(values => {
                values.urls = values.urls.map((item: any) => item.url)
                markdownRun(values)
            })
        }}
        confirmLoading={confirmLoading}
        onClose={() => onClose()}
        maskClosable={false}
        onCancel={() => onClose()}>
        <div className="overflow-auto mt-6 h-[400px]">
            <Form
                {...layout}
                form={form}
                onFinish={() => { }}
                style={{ maxWidth: 600 }}
            >
                <Form.Item name="document" label="文档" rules={[{ required: true }]}>
                    <CustomSelect autoComplete="off" />
                </Form.Item>
                <Form.Item name="className" label="选择类" rules={[{ required: true }]}>
                    <Input autoComplete="off" />
                </Form.Item>
                <Form.List name="urls">
                    {(fields, { add, remove }) => (
                        <>
                            {fields.map(({ key, name, ...restField }) => (
                                <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                                    <Form.Item
                                        {...restField}
                                        labelCol={{ span: 5 }}
                                        wrapperCol={{ span: 18 }}
                                        name={[name, 'url']}
                                        label="路径"
                                        style={{ width: 300, marginLeft: 16 }}
                                        rules={[{ required: true, message: '请输出路径' }]}
                                    >
                                        <Input placeholder="导入路径" autoComplete="off" />
                                    </Form.Item>
                                    <MinusCircleOutlined onClick={() => remove(name)} />
                                </Space>
                            ))}
                            <Form.Item>
                                <Button type="dashed" style={{ width: 220, marginLeft: 80 }} onClick={() => add()} block icon={<PlusOutlined />}>
                                    添加
                                </Button>
                            </Form.Item>
                        </>
                    )}
                </Form.List>
            </Form>
        </div>
    </Modal>
}